<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TurboWarp 云列表服务</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        neutral: '#1F2937',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-soft {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
        }
    </style>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        html {
            scroll-behavior: smooth;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-neutral">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cloud text-primary text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold text-primary">TurboWarp 云列表服务</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="#home" class="hover:text-primary transition-colors">首页</a>
                <a href="#api" class="hover:text-primary transition-colors">API文档</a>
                <a href="#examples" class="hover:text-primary transition-colors">使用示例</a>
                <a href="#manager" class="hover:text-primary transition-colors">列表管理</a>
            </nav>
            <button id="mobile-menu-btn" class="md:hidden text-neutral text-xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#home" class="py-2 hover:text-primary transition-colors">首页</a>
                <a href="#api" class="py-2 hover:text-primary transition-colors">API文档</a>
                <a href="#examples" class="py-2 hover:text-primary transition-colors">使用示例</a>
                <a href="#manager" class="py-2 hover:text-primary transition-colors">列表管理</a>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section id="home" class="py-16 md:py-24 bg-gradient-to-br from-primary/5 to-secondary/10">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">为 TurboWarp 打造的云列表服务</h2>
                <p class="text-lg md:text-xl text-gray-600 mb-8">通过简单的 HTTP 积木，让你的 Scratch 项目实现数据的云端存储与同步</p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#api" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-all shadow-lg hover:shadow-xl">
                        查看 API 文档
                    </a>
                    <a href="#examples" class="bg-white hover:bg-gray-50 text-primary border border-primary px-6 py-3 rounded-lg font-medium transition-all shadow-md hover:shadow-lg">
                        查看使用示例
                    </a>
                </div>
                <div class="mt-12 p-4 bg-white rounded-lg shadow-soft inline-block">
                    <p class="font-medium">服务器地址:</p>
                    <p id="server-url" class="text-primary font-mono">https://你的服务器地址</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能介绍 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-2xl md:text-3xl font-bold mb-4">核心功能</h2>
                <div class="w-20 h-1 bg-primary mx-auto"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-6 rounded-xl shadow-soft hover:shadow-lg transition-shadow">
                    <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                        <i class="fa fa-save text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">数据存储</h3>
                    <p class="text-gray-600">将你的列表数据安全地存储在云端，即使关闭项目也不会丢失</p>
                </div>
                
                <div class="bg-gray-50 p-6 rounded-xl shadow-soft hover:shadow-lg transition-shadow">
                    <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                        <i class="fa fa-refresh text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">实时同步</h3>
                    <p class="text-gray-600">多设备访问时自动同步数据，保持最新状态</p>
                </div>
                
                <div class="bg-gray-50 p-6 rounded-xl shadow-soft hover:shadow-lg transition-shadow">
                    <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                        <i class="fa fa-code text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">简单集成</h3>
                    <p class="text-gray-600">通过 TurboWarp 的 HTTP 积木轻松集成，无需复杂代码</p>
                </div>
            </div>
        </div>
    </section>

    <!-- API 文档 -->
    <section id="api" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-2xl md:text-3xl font-bold mb-4">API 文档</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    使用以下 API 端点与云列表服务交互，所有请求均支持跨域访问
                </p>
            </div>
            
            <div class="max-w-3xl mx-auto space-y-10">
                <!-- 保存列表 API -->
                <div class="bg-white p-6 rounded-xl shadow-soft">
                    <div class="flex items-center mb-4">
                        <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium mr-3">POST</span>
                        <h3 class="text-xl font-semibold">保存列表</h3>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
                        /api/save
                    </div>
                    <p class="mb-3 font-medium">请求参数 (JSON):</p>
                    <ul class="list-disc pl-5 text-gray-600 mb-4 space-y-1">
                        <li><code>projectId</code>: 你的项目唯一标识（字符串）</li>
                        <li><code>listName</code>: 列表名称（字符串）</li>
                        <li><code>items</code>: 列表内容（数组）</li>
                    </ul>
                    <p class="mb-3 font-medium">响应:</p>
                    <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm overflow-x-auto">
                        { "success": true, "message": "列表保存成功" }
                    </div>
                </div>
                
                <!-- 加载列表 API -->
                <div class="bg-white p-6 rounded-xl shadow-soft">
                    <div class="flex items-center mb-4">
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium mr-3">GET</span>
                        <h3 class="text-xl font-semibold">加载列表</h3>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
                        /api/load?projectId=你的项目ID&listName=你的列表名称
                    </div>
                    <p class="mb-3 font-medium">响应:</p>
                    <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm overflow-x-auto">
                        { "success": true, "items": ["项1", "项2", "项3"] }
                    </div>
                </div>
                
                <!-- 添加项 API -->
                <div class="bg-white p-6 rounded-xl shadow-soft">
                    <div class="flex items-center mb-4">
                        <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium mr-3">POST</span>
                        <h3 class="text-xl font-semibold">添加列表项</h3>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
                        /api/add
                    </div>
                    <p class="mb-3 font-medium">请求参数 (JSON):</p>
                    <ul class="list-disc pl-5 text-gray-600 mb-4 space-y-1">
                        <li><code>projectId</code>: 你的项目唯一标识</li>
                        <li><code>listName</code>: 列表名称</li>
                        <li><code>item</code>: 要添加的项（字符串）</li>
                    </ul>
                    <p class="mb-3 font-medium">响应:</p>
                    <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm overflow-x-auto">
                        { "success": true, "message": "项已添加", "newLength": 4 }
                    </div>
                </div>
                
                <!-- 删除项 API -->
                <div class="bg-white p-6 rounded-xl shadow-soft">
                    <div class="flex items-center mb-4">
                        <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium mr-3">POST</span>
                        <h3 class="text-xl font-semibold">删除列表项</h3>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
                        /api/remove
                    </div>
                    <p class="mb-3 font-medium">请求参数 (JSON):</p>
                    <ul class="list-disc pl-5 text-gray-600 mb-4 space-y-1">
                        <li><code>projectId</code>: 你的项目唯一标识</li>
                        <li><code>listName</code>: 列表名称</li>
                        <li><code>index</code>: 要删除的项的索引（数字，从0开始）</li>
                    </ul>
                    <p class="mb-3 font-medium">响应:</p>
                    <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm overflow-x-auto">
                        { "success": true, "message": "项已删除", "newLength": 3 }
                    </div>
                </div>
                
                <!-- 测试连接 API -->
                <div class="bg-white p-6 rounded-xl shadow-soft">
                    <div class="flex items-center mb-4">
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium mr-3">GET</span>
                        <h3 class="text-xl font-semibold">测试连接</h3>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
                        /api/ping
                    </div>
                    <p class="mb-3 font-medium">响应:</p>
                    <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm overflow-x-auto">
                        { "success": true, "message": "连接成功", "serverTime": 1622505600000 }
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用示例 -->
    <section id="examples" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-2xl md:text-3xl font-bold mb-4">TurboWarp 使用示例</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    如何在 TurboWarp 中使用 HTTP 积木连接到我们的云列表服务
                </p>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="bg-gray-50 p-6 rounded-xl shadow-soft mb-10">
                    <h3 class="text-xl font-semibold mb-4">1. 设置服务器地址</h3>
                    <p class="mb-4 text-gray-600">首先，创建一个变量存储服务器地址：</p>
                    <div class="bg-white p-4 rounded-lg border border-gray-200 mb-4">
                        <p class="font-medium">变量名称: 服务器地址</p>
                        <p class="font-mono text-primary">https://你的服务器地址/api</p>
                    </div>
                </div>
                
                <div class="bg-gray-50 p-6 rounded-xl shadow-soft mb-10">
                    <h3 class="text-xl font-semibold mb-4">2. 保存列表到云端</h3>
                    <p class="mb-4 text-gray-600">使用 POST 积木保存列表：</p>
                    <ol class="list-decimal pl-5 mb-4 space-y-2 text-gray-600">
                        <li>创建一个包含项目ID、列表名称和项目的JSON对象</li>
                        <li>使用 "发送POST请求到URL" 积木，URL为 "服务器地址/save"</li>
                        <li>将JSON对象作为请求体发送</li>
                    </ol>
                    <div class="bg-white p-4 rounded-lg border border-gray-200">
                        <p class="font-mono text-sm">
                            {<br>
                            &nbsp;&nbsp;"projectId": "你的项目ID",<br>
                            &nbsp;&nbsp;"listName": "我的列表",<br>
                            &nbsp;&nbsp;"items": [列表的所有项]<br>
                            }
                        </p>
                    </div>
                </div>
                
                <div class="bg-gray-50 p-6 rounded-xl shadow-soft mb-10">
                    <h3 class="text-xl font-semibold mb-4">3. 从云端加载列表</h3>
                    <p class="mb-4 text-gray-600">使用 GET 积木加载列表：</p>
                    <ol class="list-decimal pl-5 mb-4 space-y-2 text-gray-600">
                        <li>构建URL："服务器地址/load?projectId=你的项目ID&listName=我的列表"</li>
                        <li>使用 "发送GET请求到URL" 积木</li>
                        <li>解析返回的JSON响应，提取items数组</li>
                        <li>将items数组更新到本地列表</li>
                    </ol>
                </div>
                
                <div class="bg-primary/10 p-6 rounded-xl border border-primary/20">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-lightbulb-o text-primary mr-2"></i>
                        提示
                    </h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-700">
                        <li>项目ID可以是任何唯一的字符串，建议使用你的用户名+项目名</li>
                        <li>使用 "解析JSON" 积木处理服务器返回的响应</li>
                        <li>定期保存列表，确保数据不会丢失</li>
                        <li>加载列表后，使用 "替换列表" 积木更新本地列表</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 列表管理 -->
    <section id="manager" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-2xl md:text-3xl font-bold mb-4">云列表管理</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    查看和管理已存储的云列表数据
                </p>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="bg-white p-6 rounded-xl shadow-soft mb-8">
                    <div class="flex flex-col md:flex-row gap-4 mb-6">
                        <div class="flex-1">
                            <label for="project-id" class="block text-sm font-medium text-gray-700 mb-1">项目ID</label>
                            <input type="text" id="project-id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="输入项目ID">
                        </div>
                        <div class="flex-1">
                            <label for="list-name" class="block text-sm font-medium text-gray-700 mb-1">列表名称</label>
                            <input type="text" id="list-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="输入列表名称">
                        </div>
                        <div class="flex items-end">
                            <button id="load-list-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors">
                                <i class="fa fa-search mr-1"></i> 加载列表
                            </button>
                        </div>
                    </div>
                    
                    <div id="list-items-container" class="border border-gray-200 rounded-lg p-4 min-h-[150px]">
                        <p class="text-gray-500 text-center italic">请输入项目ID和列表名称，然后点击"加载列表"</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button id="clear-list-btn" class="bg-red-100 hover:bg-red-200 text-red-700 px-4 py-2 rounded-lg transition-colors">
                            <i class="fa fa-trash mr-1"></i> 清空列表
                        </button>
                        <button id="add-item-btn" class="bg-green-100 hover:bg-green-200 text-green-700 px-4 py-2 rounded-lg transition-colors">
                            <i class="fa fa-plus mr-1"></i> 添加测试项
                        </button>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-soft">
                    <h3 class="text-lg font-semibold mb-4">所有存储的项目</h3>
                    <div id="projects-list" class="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-[300px] overflow-y-auto">
                        <!-- 项目列表将通过JavaScript动态生成 -->
                        <p class="text-gray-500 text-center italic col-span-full">暂无存储的项目</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-neutral text-white py-10">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-2 mb-2">
                        <i class="fa fa-cloud text-primary text-xl"></i>
                        <span class="font-bold text-xl">TurboWarp 云列表服务</span>
                    </div>
                    <p class="text-gray-400">为 TurboWarp 项目提供简单的云列表解决方案</p>
                </div>
                
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-envelope text-xl"></i>
                    </a>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
                <p>&copy; 2024 TurboWarp 云列表服务. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            const icon = mobileMenuBtn.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            } else {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            }
        });
        
        // 模拟数据存储（实际应用中应使用数据库）
        let cloudData = JSON.parse(localStorage.getItem('turboWarpCloudData')) || {};
        
        // 保存数据到本地存储
        function saveDataToLocalStorage() {
            localStorage.setItem('turboWarpCloudData', JSON.stringify(cloudData));
        }
        
        // DOM 元素
        const projectIdInput = document.getElementById('project-id');
        const listNameInput = document.getElementById('list-name');
        const loadListBtn = document.getElementById('load-list-btn');
        const clearListBtn = document.getElementById('clear-list-btn');
        const addItemBtn = document.getElementById('add-item-btn');
        const listItemsContainer = document.getElementById('list-items-container');
        const projectsList = document.getElementById('projects-list');
        const serverUrlElement = document.getElementById('server-url');
        
        // 设置当前页面URL作为服务器地址示例
        serverUrlElement.textContent = window.location.href.replace(/\/$/, '');
        
        // 加载列表
        loadListBtn.addEventListener('click', () => {
            const projectId = projectIdInput.value.trim();
            const listName = listNameInput.value.trim();
            
            if (!projectId || !listName) {
                alert('请输入项目ID和列表名称');
                return;
            }
            
            // 检查数据是否存在
            if (!cloudData[projectId] || !cloudData[projectId][listName]) {
                listItemsContainer.innerHTML = `<p class="text-gray-500 text-center italic">未找到列表数据，请先在TurboWarp中保存数据</p>`;
                return;
            }
            
            // 显示列表数据
            const items = cloudData[projectId][listName].items;
            let html = `<div class="flex justify-between items-center mb-2">
                <h4 class="font-medium">列表内容 (共 ${items.length} 项)</h4>
                <span class="text-sm text-gray-500">最后更新: ${new Date(cloudData[projectId][listName].timestamp).toLocaleString()}</span>
            </div>`;
            
            html += '<ul class="space-y-2">';
            items.forEach((item, index) => {
                html += `<li class="flex items-center justify-between p-2 bg-gray-50 rounded border border-gray-100">
                    <span>${index + 1}. ${item}</span>
                    <button class="delete-item-btn text-red-500 hover:text-red-700" data-index="${index}">
                        <i class="fa fa-times"></i>
                    </button>
                </li>`;
            });
            html += '</ul>';
            
            listItemsContainer.innerHTML = html;
            
            // 添加删除项事件监听
            document.querySelectorAll('.delete-item-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const index = parseInt(e.target.closest('.delete-item-btn').dataset.index);
                    deleteItem(projectId, listName, index);
                });
            });
        });
        
        // 清空列表
        clearListBtn.addEventListener('click', () => {
            const projectId = projectIdInput.value.trim();
            const listName = listNameInput.value.trim();
            
            if (!projectId || !listName) {
                alert('请输入项目ID和列表名称');
                return;
            }
            
            if (confirm(`确定要清空项目 "${projectId}" 中的列表 "${listName}" 吗？`)) {
                if (cloudData[projectId] && cloudData[projectId][listName]) {
                    cloudData[projectId][listName].items = [];
                    cloudData[projectId][listName].timestamp = Date.now();
                    saveDataToLocalStorage();
                    loadListBtn.click(); // 重新加载列表
                    updateProjectsList();
                }
            }
        });
        
        // 添加测试项
        addItemBtn.addEventListener('click', () => {
            const projectId = projectIdInput.value.trim();
            const listName = listNameInput.value.trim();
            
            if (!projectId || !listName) {
                alert('请输入项目ID和列表名称');
                return;
            }
            
            // 确保项目和列表存在
            if (!cloudData[projectId]) {
                cloudData[projectId] = {};
            }
            if (!cloudData[projectId][listName]) {
                cloudData[projectId][listName] = {
                    items: [],
                    timestamp: Date.now()
                };
            }
            
            // 添加测试项
            const newItem = `测试项 ${new Date().toLocaleTimeString()}`;
            cloudData[projectId][listName].items.push(newItem);
            cloudData[projectId][listName].timestamp = Date.now();
            saveDataToLocalStorage();
            
            loadListBtn.click(); // 重新加载列表
            updateProjectsList();
        });
        
        // 删除项
        function deleteItem(projectId, listName, index) {
            if (cloudData[projectId] && cloudData[projectId][listName]) {
                cloudData[projectId][listName].items.splice(index, 1);
                cloudData[projectId][listName].timestamp = Date.now();
                saveDataToLocalStorage();
                loadListBtn.click(); // 重新加载列表
                updateProjectsList();
            }
        }
        
        // 更新项目列表
        function updateProjectsList() {
            if (Object.keys(cloudData).length === 0) {
                projectsList.innerHTML = '<p class="text-gray-500 text-center italic col-span-full">暂无存储的项目</p>';
                return;
            }
            
            let html = '';
            for (const projectId in cloudData) {
                const lists = cloudData[projectId];
                const listCount = Object.keys(lists).length;
                
                html += `<div class="bg-gray-50 p-3 rounded-lg border border-gray-100">
                    <div class="font-medium mb-1">${projectId}</div>
                    <div class="text-sm text-gray-600">包含 ${listCount} 个列表</div>
                    <div class="mt-2 flex gap-2">
                        <button class="view-project-btn text-primary text-xs px-2 py-1 bg-primary/10 rounded" data-project="${projectId}">
                            查看
                        </button>
                        <button class="delete-project-btn text-red-500 text-xs px-2 py-1 bg-red-100 rounded" data-project="${projectId}">
                            删除
                        </button>
                    </div>
                </div>`;
            }
            
            projectsList.innerHTML = html;
            
            // 添加项目操作事件监听
            document.querySelectorAll('.view-project-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const projectId = e.target.closest('.view-project-btn').dataset.project;
                    projectIdInput.value = projectId;
                    // 自动填充第一个列表名称
                    const firstListName = Object.keys(cloudData[projectId])[0];
                    if (firstListName) {
                        listNameInput.value = firstListName;
                    }
                    loadListBtn.click();
                    // 滚动到列表内容区域
                    listItemsContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                });
            });
            
            document.querySelectorAll('.delete-project-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const projectId = e.target.closest('.delete-project-btn').dataset.project;
                    if (confirm(`确定要删除项目 "${projectId}" 及其所有列表吗？`)) {
                        delete cloudData[projectId];
                        saveDataToLocalStorage();
                        updateProjectsList();
                    }
                });
            });
        }
        
        // 实现API服务
        function setupAPIService() {
            // 检查是否在支持ServiceWorker的环境中
            if ('serviceWorker' in navigator && 'FetchEvent' in self) {
                navigator.serviceWorker.register('service-worker.js').then(registration => {
                    console.log('ServiceWorker 注册成功:', registration.scope);
                }).catch(err => {
                    console.log('ServiceWorker 注册失败:', err);
                });
            } else {
                console.log('当前环境不支持ServiceWorker，使用模拟API');
                setupAPIMock();
            }
        }
        
        // API 模拟（用于不支持ServiceWorker的环境）
        function setupAPIMock() {
            // 模拟API方法
            window.api = {
                save: (projectId, listName, items) => {
                    if (!cloudData[projectId]) {
                        cloudData[projectId] = {};
                    }
                    cloudData[projectId][listName] = {
                        items: [...items],
                        timestamp: Date.now()
                    };
                    saveDataToLocalStorage();
                    updateProjectsList();
                    return { success: true, message: "列表保存成功" };
                },
                
                load: (projectId, listName) => {
                    if (!cloudData[projectId] || !cloudData[projectId][listName]) {
                        return { success: false, message: "列表不存在" };
                    }
                    return { 
                        success: true, 
                        items: [...cloudData[projectId][listName].items] 
                    };
                },
                
                add: (projectId, listName, item) => {
                    if (!cloudData[projectId]) {
                        cloudData[projectId] = {};
                    }
                    if (!cloudData[projectId][listName]) {
                        cloudData[projectId][listName] = {
                            items: [],
                            timestamp: Date.now()
                        };
                    }
                    cloudData[projectId][listName].items.push(item);
                    cloudData[projectId][listName].timestamp = Date.now();
                    saveDataToLocalStorage();
                    updateProjectsList();
                    return { 
                        success: true, 
                        message: "项已添加", 
                        newLength: cloudData[projectId][listName].items.length 
                    };
                },
                
                remove: (projectId, listName, index) => {
                    if (!cloudData[projectId] || !cloudData[projectId][listName]) {
                        return { success: false, message: "列表不存在" };
                    }
                    if (index < 0 || index >= cloudData[projectId][listName].items.length) {
                        return { success: false, message: "索引无效" };
                    }
                    cloudData[projectId][listName].items.splice(index, 1);
                    cloudData[projectId][listName].timestamp = Date.now();
                    saveDataToLocalStorage();
                    updateProjectsList();
                    return { 
                        success: true, 
                        message: "项已删除", 
                        newLength: cloudData[projectId][listName].items.length 
                    };
                },
                
                ping: () => {
                    return { 
                        success: true, 
                        message: "连接成功", 
                        serverTime: Date.now() 
                    };
                }
            };
        }
        
        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', () => {
            setupAPIService();
            updateProjectsList();
            
            // 填充示例项目ID
            projectIdInput.value = 'example_project_' + Math.floor(Math.random() * 1000);
            listNameInput.value = 'my_list';
        });
    </script>
</body>
</html>
    